<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    td {
      text-align: center;
    }
    .table-inp {
      border: none;
      outline: none;
      text-align: center;
    }
  </style>
  <body>
    搜索：<input type="search" id="keyword" /> 按年龄排序：<button id="up">
      ↑
    </button>
    <button id="down">↓</button>
    <table border="1" style="width: 800px; margin-top: 10px">
      <thead>
        <tr>
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
          <th>电话</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <button id="add">添加一行</button>

    <div>
      <input type="checkbox" name="like" id="" />篮球
      <input type="checkbox" name="like" id="" />足球
      <input type="checkbox" name="like" id="" />唱
      <input type="checkbox" name="like" id="" />跳
      <dialog id="tips1">请选择兴趣爱好</dialog>
      <dialog id="tips2">已选择爱好</dialog>
      <button id="sub">提交</button>
    </div>
  </body>
  <script>
    var arr = [
      {
        name: '张三',
        age: 20,
        sex: '男',
        phone: '138888888',
        bgcolor: 'white',
      },
      {
        name: '张三三',
        age: 20,
        sex: '男',
        phone: '138888888',
        bgcolor: 'white',
      },
      {
        name: '李四',
        age: 10,
        sex: '男',
        phone: '138888888',
        bgcolor: 'white',
      },
      {
        name: '王五',
        age: 14,
        sex: '女',
        phone: '138888888',
        bgcolor: 'white',
      },
    ]
    window.onload = function () {
      //显示列表
      showList()
      //添加一行
      document.getElementById('add').onclick = addList
      //搜索
      document.getElementById('keyword').onkeyup = searchList
      //升序事件
      document.getElementById('up').onclick = sortList
      //降序事件
      document.getElementById('down').onclick = sortList

      //第一题
      document.getElementById('sub').onclick = checkForm
    }
    //判断用户是否选择了兴趣爱好
    function checkForm() {
      var chx = document.getElementsByName('like'),
        status = false
      for (var i = 0; i < chx.length; i++) {
        if (chx[i].checked) {
          status = true
        }
      }
      if (!status) {
        document.getElementById('tips1').setAttribute('open', '')
        document.getElementById('tips2').removeAttribute('open')
      } else {
        document.getElementById('tips1').removeAttribute('open')
        document.getElementById('tips2').setAttribute('open', '')
      }
    }
    //age排序列表
    function sortList() {
      if (this.id == 'up') {
        arr.sort(function (a, b) {
          return a.age - b.age
        })
      } else {
        arr.sort(function (a, b) {
          return b.age - a.age
        })
      }
      showList()
    }
    //搜索列表
    function searchList() {
      var keyword = document.getElementById('keyword').value //张三
      for (var i in arr) {
        if (arr[i].name.search(keyword) > -1 && keyword != '') {
          arr[i].bgcolor = '#ccc'
        } else {
          arr[i].bgcolor = 'white'
        }
      }
      showList()
    }
    //添加一行
    function addList() {
      arr.push({
        name: '未填写',
        age: '未填写',
        sex: '未填写',
        phone: '未填写',
      })
      showList()
    }
    //显示数据列表
    function showList() {
      var str = ''
      for (var i in arr) {
        str += `<tr style="background:${arr[i].bgcolor}">
                    <td><input onblur="(arr[${i}].name = this.value)"  style="background:${arr[i].bgcolor}" class="table-inp" type="text" value="${arr[i].name}" /></td>
                    <td><input onblur="(arr[${i}].sex = this.value)" style="background:${arr[i].bgcolor}" class="table-inp" type="text" value="${arr[i].sex}" /></td>
                    <td><input onblur="(arr[${i}].age = this.value)" style="background:${arr[i].bgcolor}" class="table-inp" type="text" value="${arr[i].age}" /></td>
                    <td><input onblur="(arr[${i}].phone = this.value)" style="background:${arr[i].bgcolor}" class="table-inp" type="text" value="${arr[i].phone}" /></td>
                    <td>
                        <button onclick="del(${i})">删除</button>
                    </td>
                </tr>`
      }
      document.querySelector('tbody').innerHTML = str
    }

    //删除
    function del(index) {
      arr.splice(index, 1)
      showList()
    }
  </script>
</html>
